<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--<title>爱淘金</title>-->
<link rel="stylesheet" type="text/css" media="all" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/PersonalCenter.css" />

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<script src="js/js.js" type="text/javascript"></script>
<style type="text/css">
	.bg-w{background: #fff;}
	.bg-white{background: #fff;height: 100%;width: 100%;position: absolute;top: 0;left: 0;overflow-y: auto;}
	.header .bleft{background: url(images/bleft.png)no-repeat center center;background-size:.16rem .3rem;}
	.nam>input{width: 100%;height: 100%;border: 0;outline: none;}
	.smsbtn{width: 2rem;height:.5rem;color:#fff;background: #ccc;font-size: .23rem;border-radius: 5px;outline: none;border: 0;}
	.smsimg-box{width: 6.39rem;height: 4.43rem;background: #fff;margin-top: 2.64rem;margin-left: .44rem;border-radius: 5px;overflow: hidden;}
	.btn{height:.77rem ;width: 100%;font-size:.28rem ;border:1px solid #d9d9d9;outline: none;}
	.regip{padding:0 .32rem;font-size:.22rem;color:#6a6a6a;line-height: .4rem;margin-top:.1rem;;}
	.reglink{color:#1a1a1a;font-size:.22rem;text-align: center;display: block;margin-top:.6rem;}
	
	/*图形验证*/
	.tutit{font-size: .44rem;text-align: center;color:#333;padding-top: .44rem;}
	#tuyzm{background: #ccc;}
	.can_btn{width: 50%;float: left;height: 1.1rem;background: #eee;border: 0;border-right:1px solid #fff;color: #aaa;}
	.enter_btn{width: 50%;float: left;height: 1.1rem;border: 0;color: #ec4849;background: #eee;}
	.regpic{height:.54rem;width:1.4rem;}
</style>
</head>
<body>
	<!--顶部-->
	<div class="header bg-w">
		<a href="javascript:history.go(-1);" class="hele bleft"></a>
		<h1 class="b">注册</h1>
	</div>
	
	<div id="page" class="bg-white m">
		<div class="">
			<div class="nam">
				<input type="text" placeholder="输入你的手机号"  name="username" id="username" value="" />
			</div>
			
			<div  class="nam">
				<input type="text" placeholder="输入验证码" name="sms" id="sms" value="" />
				<button class="smsbtn" id="second" onclick="goTime(this)">获取验证码</button>
			</div>
			
			<div  class="nam">
				<input type="text" name="pwd" id="pwd" placeholder="请输入6位以上的字母或数字作密码" value="" />
			</div>
			<p class="regip">注册即表示同意《用户使用条款及服务协议》</p>
		</div>
		
		<div class="sure" style="margin-top: .51rem;">
			<button type="button" class="rebtn font33" style="background: #eb3b00;" onclick="dialog('#d1')">完成</button>
		</div>
		<a href="login.html" class="reglink">已有账号？立即登录</a>
		
		<!--遮罩-->
		<div class="mask" style="top: 0;opacity: .5;"></div>
		<!--图形验证码弹出-->
		<div class="dialog" id="d1">
			<div class="smsimg-box">
				<h1 class="tutit">图形验证</h1>
				<div class="nam" style="width: 4.44rem;margin: 0.89rem auto 1rem;background: #ccc;height: .53rem;">
					<input type="text" placeholder="请输入验证码" name="" id="tuyzm" value="" />
					<span><img src="images/cy.png" class="regpic"/></span>
				</div>
				<button class="can_btn btn" onclick="dialogClose()">取消</button>
				<button class="enter_btn btn">确定兑换</button>
			</div>
			
		</div>
		
	</div>
	

	
</body>
<script>
//获取验证码倒计时
    function goTime(obj){
    	$(obj).css({"background":"rgb(235,59,0)","color":"#fff"})
		var sec = document.getElementById("second");
		
		var i = 10;
		var timer = setInterval(function(){
		    i--;
		    sec.innerHTML ="还有"+i + "秒钟";
		    if(i > 0){
		    	$("#second").prop('disabled',true);
		    }
		    else if(i==0){
		     	sec.innerHTML = '获取验证码';
		      	clearInterval(timer);
		      	$(obj).removeAttr("style");
	    		$("#second").prop('disabled',false);
		    }
	 	},1000);
	}
//  图形验证码弹出

    
</script>
</html>

